<template>
    <div class="main">
        <el-input style="width: 150px"
                  v-if="show"
                  v-model.trim="inputValue"
                  @keyup.enter="handleInputConfirm"
                  @blur="handleInputConfirm"
                  size="small"
        placeholder="请输入标签名">
        </el-input>
        <el-button v-else @click="click">新建标签 +</el-button>
        <template v-for="(tag, index) in tags" :key="tag">
            <el-tag :closable="true" :tag-id="index" @close="closeTag(index)" style="margin-right: 10px">{{tag}}</el-tag>
        </template>
        <el-radio-group v-model="radio"  @change="console.log(this.radio)">
            <el-radio :label="0">男</el-radio>
            <el-radio :label="1">女</el-radio>
        </el-radio-group>

    </div>
</template>

<script>
export default {
    name: "hello-1",
    data() {
        return{
            show: false,
            inputValue: "",
            tags: ["男装", "女装", "儿童装"],
            radio: 1
        }
    },
    methods: {
        closeTag(index) {
            this.tags.splice(index, 1)
        },
        handleInputConfirm(){
            if (this.inputValue) {
                this.tags.push(this.inputValue)
            }
            this.show = false
            this.inputValue = ""
        },
        click(){
            this.$alert({
                title: "成功",
                showClose: true,
                message: "哈哈哈",
                type: "success"
            })
        }
    }
}
</script>

<style scoped>
    .main{
        margin-top: 20px;
    }
</style>